<template>
    <div id="app">
        <div id="nav">
            <!-- 声明式导航 -->
            <!-- <router-link to="/">Home</router-link> | -->
            <!-- path query -->
            <!-- <router-link :to="{ path: '/about', query: { id: 1 } }">About</router-link> -->
            <!-- name params -->
            <!-- <router-link :to="{ name: 'About', params: { id: 1 } }">About</router-link> -->

            <!-- 编程式导航 -->
            <a @click="jumpHome">Home</a> |
            <a @click="jumpAbout">About</a>
        </div>
        <router-view />
        <div class="left">
            <router-view name="a" />
        </div>
        <div class="right">
            <router-view name="b" />
        </div>
    </div>
</template>

<script>
export default {
    methods: {
        jumpHome() {
            this.$router.push('/');
        },
        jumpAbout() {
            // this.$router.push('/about');
            this.$router.push({ name: 'About', params: { id: 1 } });
            // this.$router.push({ name: 'About', query: { id: 1 } });  // 不推荐这种写法
        },
    },
};
</script>

<style scoped lang="scss">
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    .left,
    .right {
        width: 50%;
        float: left;
    }
}

#nav {
    padding: 30px;

    a {
        font-weight: bold;
        color: #2c3e50;

        &.router-link-exact-active {
            color: #42b983;
        }
    }
}
</style>
